<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Gra—Main</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <!-- Le styles -->
    <link rel="stylesheet" href="assets/css/style.css"/>
    <link rel="stylesheet" href="assets/css/loader-style.css"/>
    <link rel="stylesheet" href="assets/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="assets/js/progress-bar/number-pb.css"/>
    <style type="text/css">
    #toggle{
    	top:10px !important;
    }
    #skin-select{
    	top:13px;
    }
    #logo{
    	top:-10px;
    }
    /*css代码*/
	 /*css代码*/
	#menu{
		width: 90px; /*设置为0 隐藏自定义菜单*/
		height: 125px;
		overflow: hidden; /*隐藏溢出的元素*/
		box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
		position: absolute; /*自定义菜单相对与body元素进行定位*/
		display: none;
		font-size:13px;
		font-family:	Microsoft Yahei;
		color:#000000;
	}
	.menu{
		width: 130px;
		height: 25px;
		line-height: 25px;
		padding-left: 30px;
		padding-top:15px;
	}
    </style>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/minus.png"/>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&amp;ak=3ZxdK3XO9S51XPPOgTujzau5LhoTECll"></script>
</head>
<body> 
    <!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>
    <!-- TOP NAVBAR -->
    <nav role="navigation" class="navbar navbar-static-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button">
                    <span class="entypo-menu"></span>
                </button>
                <button class="navbar-toggle toggle-menu-mobile toggle-left" type="button">
                    <span class="entypo-list-add"></span>
                </button>
                <div id="logo-mobile" class="visible-xs">
                   <h1>WEB管理<span>v1.2</span></h1>
                </div>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse" style="margin-left:14%">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#"><i style="font-size:20px;" class="icon-conversation"></i><div class="noft-red">23</div></a>
                        <ul style="margin: 11px 0 0 9px;" role="menu" class="dropdown-menu dropdown-wrap">
                            <li>
                                <a href="#">
                                    <img alt="" class="img-msg img-circle" src="http://api.randomuser.me/portraits/thumb/men/1.jpg">Jhon Doe <b>Just Now</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <img alt="" class="img-msg img-circle" src="http://api.randomuser.me/portraits/thumb/women/1.jpg">Jeniffer <b>3 Min Ago</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <img alt="" class="img-msg img-circle" src="http://api.randomuser.me/portraits/thumb/men/2.jpg">Dave <b>2 Hours Ago</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <img alt="" class="img-msg img-circle" src="http://api.randomuser.me/portraits/thumb/men/3.jpg"><i>Keanu</i>  <b>1 Day Ago</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <img alt="" class="img-msg img-circle" src="http://api.randomuser.me/portraits/thumb/men/4.jpg"><i>Masashi</i>  <b>2 Mounth Ago</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div>See All Messege</div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#"><i style="font-size:19px;" class="icon-warning tooltitle"></i><div class="noft-green">5</div></a>
                        <ul style="margin: 12px 0 0 0;" role="menu" class="dropdown-menu dropdown-wrap">
                            <li>
                                <a href="#">
                                    <span style="background:#DF2135" class="noft-icon maki-bus"></span><i>From Station</i>  <b>01B</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <span style="background:#AB6DB0" class="noft-icon maki-ferry"></span><i>Departing at</i>  <b>9:00 AM</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <span style="background:#FFA200" class="noft-icon maki-aboveground-rail"></span><i>Delay for</i>  <b>09 Min</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <span style="background:#86C440" class="noft-icon maki-airport"></span><i>Take of</i>  <b>08:30 AM</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <span style="background:#0DB8DF" class="noft-icon maki-bicycle"></span><i>Take of</i>  <b>08:30 AM</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div>See All Notification</div>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#"><i data-toggle="tooltip" data-placement="bottom" title="Help" style="font-size:20px;" class="icon-help tooltitle"></i></a>
                    </li>
                </ul>
                <div id="nt-title-container" class="navbar-left running-text visible-lg">
                    <ul class="date-top">
                        <li class="entypo-calendar" style="margin-right:5px"></li>
                        <li id="Date"></li>
                    </ul>
                    <ul id="digital-clock" class="digital">
                        <li class="entypo-clock" style="margin-right:5px"></li>
                        <li class="hour"></li>
                        <li>:</li>
                        <li class="min"></li>
                        <li>:</li>
                        <li class="sec"></li>
                        <li class="meridiem"></li>
                    </ul>
                    <ul id="nt-title">
                        <li><i class="wi-day-lightning"></i>&#160;&#160;<span id="city"></span>&#160;
                            <b id="cond_txt"></b>&#160;; <b id="tmp"></b><i class="wi-celcius"></i>
                        </li>
                    </ul>
                </div>
                <ul style="margin-right:0;" class="nav navbar-nav navbar-right">
                    <li>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <img alt="" class="admin-pic img-circle" src="http://api.randomuser.me/portraits/thumb/men/10.jpg">Hi,<span th:text="${curentUserName}"></span> <b class="caret"></b>
                        </a>
                        <ul style="margin-top:14px;" role="menu" class="dropdown-setting dropdown-menu">
                            <li>
                                <a href="/logout">
                                    <span class="entypo-user"></span>&#160;&#160;退出登录</a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="entypo-vcard"></span>&#160;&#160;Account Setting</a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="entypo-lifebuoy"></span>&#160;&#160;Help</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="http://themeforest.net/item/apricot-navigation-admin-dashboard-template/7664475?WT.ac=category_item&WT.z_author=themesmile">
                                    <span class="entypo-basket"></span>&#160;&#160; Purchase</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="icon-gear"></span>&#160;&#160;Setting</a>
                        <ul role="menu" class="dropdown-setting dropdown-menu">
                            <li class="theme-bg">
                                <div id="button-bg"></div>
                                <div id="button-bg2"></div>
                                <div id="button-bg3"></div>
                                <div id="button-bg5"></div>
                                <div id="button-bg6"></div>
                                <div id="button-bg7"></div>
                                <div id="button-bg8"></div>
                                <div id="button-bg9"></div>
                                <div id="button-bg10"></div>
                                <div id="button-bg11"></div>
                                <div id="button-bg12"></div>
                                <div id="button-bg13"></div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <!-- /END OF TOP NAVBAR -->
    <!-- SIDE MENU -->
    <div id="skin-select">
        <div id="logo">
         <h1>Damionew</h1>
        </div>
        <a id="toggle">
            <span class="entypo-menu"></span>
        </a>
        <div class="skin-part">
            <div id="tree-wrap">
                <div class="side-bar">
                    <ul class="topnav menu-left-nest">
                        <li>
                            <a href="#" style="border-left:0px solid!important;" class="title-menu-left">
                                <span>菜单</span>
                                <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>
                            </a>
                        </li>
                        <li th:each="parentmenu : ${menuList}">
                            <a class="tooltip-tip ajax-load" th:title="${parentmenu.menuName}">
                                <i class="icon-document-edit"></i>
                                <span th:text="${parentmenu.menuName}"></span>
                            </a>
                            <ul>
                                <li th:each="childmenu : ${parentmenu.childMenus}">
                                    <a class="tooltip-tip2 ajax-load" th:href="${childmenu.url}"  th:title="${childmenu.menuName}" target="iframe">
                                    	<i class="entypo-doc-text"></i>
                                    	<span th:text="${childmenu.menuName}"></span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <div class="side-dash">
                        <h3>
                            <span>Visitors</span>
                        </h3>
                        <div id="g1" style="height:180px" class="gauge"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END OF SIDE MENU -->
    <!--  PAPER WRAP -->
    <div class="wrap-fluid" >
    	<iframe id="placeholder" name="iframe" src="familyPhoto" frameborder="0" align="left" style="width:100%;height:800px;margin-top: 10px;" scrolling="no">
        </iframe>
    </div>
     <div id="menu">
     	<div class="menu">派单</div>
     	<div class="menu">截屏</div>
	 </div>
    <!--  END OF PAPER WRAP -->
    <!-- RIGHT SLIDER CONTENT -->
    <!-- END OF RIGHT SLIDER CONTENT-->
    
    <script type="text/javascript" src="assets/js/progress-bar/src/jquery.velocity.min.js"></script>
    <script src="assets/js/progress-bar/number-pb.js"></script>
    <script src="assets/js/progress-bar/progress-app.js"></script>
    <!-- MAIN EFFECT -->
    <script type="text/javascript" src="assets/js/preloader.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="assets/js/load.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
    <script type="text/javascript" src="assets/js/chart/jquery.flot.js"></script>
    <script type="text/javascript" src="assets/js/chart/jquery.flot.resize.js"></script>
    <script type="text/javascript" src="assets/js/chart/realTime.js"></script>
    <script type="text/javascript" src="assets/js/speed/canvasgauge-coustom.js"></script>
    <script type="text/javascript" src="assets/js/countdown/jquery.countdown.js"></script>
    <script type="text/javascript" src="assets/js/gage/raphael.2.1.0.min.js"></script>
    <script type="text/javascript" src="assets/js/gage/justgage.js"></script>
    <script src="assets/js/jhere-custom.js"></script>
    <script type="text/javascript">
	document.getElementById('placeholder').onload = function(){
		 var menu = document.getElementById("menu");
		 window.document.getElementById('placeholder').contentWindow.document.oncontextmenu = function(e) {
			
		  var e = e || window.event;
		  //鼠标点的坐标
		  var oX = e.clientX;
		  var oY = e.clientY;
		  //菜单出现后的位置
		  menu.style.display = "block";
		  menu.style.left = oX + "px";
		  menu.style.top = oY + "px";
		  //阻止浏览器默认事件
		  return false;//一般点击右键会出现浏览器默认的右键菜单，写了这句代码就可以阻止该默认事件。
		 }
		
	}
	window.document.getElementById('placeholder').contentWindow.document.onclick = function(e) {
		alert(1)
		debugger
	   var e = e || window.event;
	   menu.style.display = "none"
	  }
	 menu.onclick = function(e) {
	  var e = e || window.event;
	  e.cancelBubble = true;
	 }
	    $(document).ready(function getPosition(){
	    	var countVistors = 0;
	    	var geolocation = new BMap.Geolocation();
	    	// 开启百度地图SDK辅助定位
	    	geolocation.enableSDKLocation();
	    	geolocation.getCurrentPosition(function(r){
	    		if(this.getStatus() == BMAP_STATUS_SUCCESS){
	    			var mk = new BMap.Marker(r.point);
	    			// 创建地理编码实例      
	    			var myGeo = new BMap.Geocoder();      
	    			// 根据坐标得到地址描述    
	    			myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result){      
	    			    if (result){   
	    			    	var city = result.addressComponents.city;
	    			    }      
	    			});
	    			$.ajax({
	    				url : "weather/uploadLocation",
	    				data : {
	    					lng : r.point.lng,
	    					lat : r.point.lat
	    				},
	    				method : "get",
	    				dataType : "json",
	    				success : function(res){
	    					document.getElementById("city").innerText = res.city;
	    					document.getElementById("cond_txt").innerText = res.cond_txt;
	    					document.getElementById("tmp").innerText = res.tmp;
	    				},error : function(){
	    					alert("地址上传失败");
	    				}
	    			});
	    			
	    			$.ajax({
	    				url : "countVistors",
	    				data : {
	    				},
	    				method : "get",
	    				dataType : "json",
	    				async : false,
	    				success : function(res){
	        				countVistors = res.countVistors;
	        				 var g1 = new JustGage({
	        		             id: "g1",
	        		             value: countVistors,
	        		             min: 0,
	        		             max: 1000,
	        		             relativeGaugeSize: true,
	        		             gaugeColor: "rgba(0,0,0,0.4)",
	        		             levelColors: "#0DB8DF",
	        		             labelFontColor : "#ffffff",
	        		             titleFontColor: "#ffffff",
	        		             valueFontColor :"#ffffff",
	        		             label: "VISITORS",
	        		             gaugeWidthScale: 0.2,
	        		             donut: true
	        		         });
	        			},error : function(){
	        				alert("wrong");
	        			}
	        		})
	    		}
	    		else {
	    			alert('failed'+this.getStatus());
	    		}        
	    	});
	    	
	    })
    	
    </script>
</body>

</html>
